<script setup lang="ts">
import { MdEditor } from "md-editor-v3";
import "md-editor-v3/lib/style.css";
import { reactive, watch } from "vue";

defineOptions({ name: "WebxMdEditor" });
const emits = defineEmits(["update:content"]);
const props = defineProps({
  content: { type: String, default: "" }
});

const editorData = reactive({
  content: ""
});

watch(
  () => props.content,
  () => {
    editorData.content = props.content;
  }
);
watch(
  () => editorData.content,
  () => {
    emits("update:content", editorData.content);
  }
);
</script>

<template>
  <MdEditor v-model="editorData.content" v-bind="$attrs" />
</template>

<style scoped lang="less">
:deep(svg.md-editor-icon) {
  width: 20px;
  height: 20px;
}
</style>
